<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<title>工单详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../assets/css/amazeui.min.css" />
	<link rel="stylesheet" type="text/css" href="../assets/swiper/swiper-4.2.0.min.css" />
	
	<link rel="stylesheet" href="../assets/css/app.css">
	<link rel="stylesheet" href="../css/global.css">
	<link rel="stylesheet" href="../css/order_details.css">
	<link rel="stylesheet" type="text/css" href="../assets/css/lightgallery.min.css" />
	<link rel="stylesheet" href="../assets/starts/start.css">

	<link rel="stylesheet" href="../assets/tencent/tcplayer.min.css">
</head>

<body data-type="widgets" class="theme-white">
	<div class="tpl-g" id="app">
		<!-- 头部 -->
		<!-- 右侧内容 -->
		<div class="tpl-header-fluid">
			<!-- 侧边切换 -->
			<div class="am-fl tpl-header-switch-button am-icon-list">
				<span>
				</span>
			</div>
			<!-- 搜索 -->
			<div class="am-fl tpl-header-search">
				<form class="tpl-header-search-form" action="javascript:;">
					<button class="tpl-header-search-btn am-icon-search"></button>
					<input class="tpl-header-search-box" type="text" placeholder="搜索内容...">
				</form>
			</div>
			<!-- 其它功能-->
			<div class="am-fr tpl-header-navbar">
				<ul>
					<!-- 欢迎语 -->
					<li class="am-text-sm tpl-header-navbar-welcome">
						<a href="javascript:;" data-provide="fullscreen">欢迎你,
							<span>Michael</span>
						</a>
					</li>
					<!-- 新提示 -->
					<li class="am-dropdown" data-am-dropdown>
						<a href="javascript:;" class="am-dropdown-toggle" data-am-dropdown-toggle>
							<i class="am-icon-bell"></i>
							<span class="am-badge am-badge-warning am-round item-feed-badge">5</span>
						</a>
						<!-- 弹出列表 -->
						<ul class="am-dropdown-content tpl-dropdown-content">
							<li class="tpl-dropdown-menu-notifications">
								<a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
									<div class="tpl-dropdown-menu-notifications-title">
										<i class="am-icon-line-chart"></i>
										<span> 有6笔新的销售订单</span>
									</div>
									<div class="tpl-dropdown-menu-notifications-time">
										12分钟前
									</div>
								</a>
							</li>
							<li class="tpl-dropdown-menu-notifications">
								<a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
									<div class="tpl-dropdown-menu-notifications-title">
										<i class="am-icon-star"></i>
										<span> 有3个来自人事部的消息</span>
									</div>
									<div class="tpl-dropdown-menu-notifications-time">
										30分钟前
									</div>
								</a>
							</li>
							<li class="tpl-dropdown-menu-notifications">
								<a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
									<div class="tpl-dropdown-menu-notifications-title">
										<i class="am-icon-folder-o"></i>
										<span> 上午开会记录存档</span>
									</div>
									<div class="tpl-dropdown-menu-notifications-time">
										1天前
									</div>
								</a>
							</li>

							<li class="tpl-dropdown-menu-notifications">
								<a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
									<i class="am-icon-bell"></i> 进入列表…
								</a>
							</li>
						</ul>
					</li>

					<!-- 退出 -->
					<li class="am-text-sm">
						<a href="javascript:;">
							<span class="am-icon-sign-out"></span> 退出
						</a>
					</li>
				</ul>
			</div>
		</div>

		<!-- 侧边导航栏 -->
		<div class="left-sidebar">

			<!-- 菜单 -->
			<ul class="sidebar-nav">
				<li class="sidebar-nav-link">
					<a href="index.html">
						<i class="am-icon-home sidebar-nav-link-logo"></i> 首页
					</a>
				</li>
				<li class="sidebar-nav-link">
					<a href="orderList.html" class="active">
						<i class="am-icon-pencil-square-o sidebar-nav-link-logo"></i> 工单管理
					</a>
				</li>
				<li class="sidebar-nav-link">
					<a href="maintenance_account.html">
						<i class="am-icon-list-ol sidebar-nav-link-logo"></i> 维修账户管理
					</a>
				</li>
				<li class="sidebar-nav-link">
					<a href="javascript:;" class="sidebar-nav-sub-title">
						<i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 资料管理
						<span class="am-icon-angle-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span>
					</a>
					<ul class="sidebar-nav sidebar-nav-sub">
						<li class="sidebar-nav-link">
							<a href="parts_fee.html">
								<span class="am-icon-long-arrow-right sidebar-nav-link-logo"></span> 零备件费用
							</a>
						</li>

						<li class="sidebar-nav-link">
							<a href="repair_maintain.html">
								<span class="am-icon-long-arrow-right sidebar-nav-link-logo"></span> 标准和条款
							</a>
						</li>
						<li class="sidebar-nav-link">
							<a href="install_remove.html">
								<span class="am-icon-long-arrow-right sidebar-nav-link-logo"></span> 按拆装视频
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="tpl-content-wrapper" v-cloak>
			<div class="row-content am-cf content">
				<div class="content_topic">
					<li class="breadcrumb-item">
						<a href="orderList.html">
							<i class="am-icon-table sidebar-nav-link-logo"></i> 工单管理
						</a>
					</li>
					<li class="breadcrumb-item active">工单详情</li>
				</div>
				<div class="main">
					<h2>
						<strong>工单编号</strong>{{order.workOrderNo}}
						<a href="orderList.html"><button class="back">返回列表</button></a>
					</h2>
					<ul class="cbp_tmtimeline">
						<!-- 步骤一，提交成功 等待审核 -->
						<li v-if="order.repairState >= 100">
							<time class="cbp_tmtime" datetime="2017-11-04T18:30">
								<span class="hidden">{{order.repairTime}}</span>
								<span class="large">等待审核</span>
							</time>
							<div class="cbp_tmicon">
								<i class="am-icon-edit"></i>
							</div>
							<div class="cbp_tmlabel">
								<!-- <h1>提交成功，等待审核</h1> -->
								<div class="cell">
									<div class="cells">
										<div class="cell-left">产品序列号:</div>
										<div class="cell-right">{{order.serialNo}}</div>
									</div>
									<div class="cells">
										<div class="cell-left">产品名称:</div>
										<div class="cell-right"> {{order.productName}}</div>
									</div>
									<div class="cells" v-if="order.guarantee">
										<div class="cell-left">保修期至:</div>
										<div class="cell-right">{{order.guarantee}}</div>
									</div>
									<div class="cells">
										<div class="cell-left">联系人:</div>
										<div class="cell-right"> {{order.customerName}}</div>
									</div>
									<div class="cells">
										<div class="cell-left">联系电话:</div>
										<div class="cell-right">{{order.customerTel}}</div>
									</div>
									<div class="cells">
										<div class="cell-left">联系地址:</div>
										<div class="cell-right">{{order.customerAddress}}</div>
									</div>
									<div class="cells">
										<div class="cell-left">问题描述:</div>
										<div class="cell-right"> {{order.problemDescCustomer}}</div>
									</div>
									<div class="problem_img">
										<div class="swiper-container">
											<div class="swiper-wrapper" id="customer-image">
												<div class="swiper-slide" v-for="file in customerFile" :id="'c-'+file.id">
													<div v-if="file.fileType === 1" :data-src="getCosFile(file.fileName)">
														<img :src="getCosFile(file.fileName)" />
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="problem_video">
										<div v-for="file in customerFile">
											<div class="video" v-if="file.fileType === 2">
												<video :id="'f'+file.fileId" width="150" height="120"></video>
												<!-- <div class="icon">
													<img src="../assets/img/play.png">
												</div> -->
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
						<div class="pass" v-if="order.repairState === 100">
							<button class="pass_bnt" data-am-modal="{target: '#create_user'}">分配人员</button>
						</div>
						<!-- 步骤二，审核通过 等待预约上门 -->
						<li v-if="order.repairState >= 101">
							<time class="cbp_tmtime" datetime="2017-11-03T13:22">
								<span>{{order.auditTime}}</span>
								<span class="large">审核通过</span>
							</time>
							<div class="cbp_tmicon bg-blush">
								<i class="am-icon-check"></i>
							</div>
							<div class="cbp_tmlabel">
								<div class="cells" v-if="order.serviceUserName">
									<div class="cell-left">维修人员:</div>
									<div class="cell-right"> {{order.serviceUserName}}</div>
								</div>
								<div class="cells" v-if="order.appointmentTime">
									<div class="cell-left">预约时间:</div>
									<div class="cell-right"> {{order.appointmentTime}}</div>
								</div>
							</div>
						</li>
						<!-- 步骤三，工单反馈 -->
						<li v-if="order.repairState >= 103">
							<time class="cbp_tmtime" datetime="2017-11-04T18:30">
								<span>{{order.feedbackTime}}</span>
								<span>工单反馈</span>
							</time>
							<div class="cbp_tmicon bg-orange">
								<i class="am-icon-truck"></i>
							</div>
							<div class="cbp_tmlabel">
								<div class="cell">
									<div class="cells">
										<div class="cell-left">维修方式:</div>
										<div class="cell-right">{{order.repairMethod}}</div>
									</div>
									<div class="cells">
										<div class="cell-left">处理结果:</div>
										<div class="cell-right">{{order.result}}</div>
									</div>
									<div class="cells" v-if="order.trackingNumber">
										<div class="cell-left">物流单号</div>
										<div class="cell-right">{{order.trackingNumber}}</div>
									</div>
									<div class="cells" v-if="spare">
										<div class="cell-left">所需配件:</div>
										<div class="cell-right">
											<ul>
												<li v-for="item in spare">{{item}}</li>
											</ul>
										</div>
									</div>
									<div class="problem_img">
										<div class="swiper-container">
											<div class="swiper-wrapper" id="service-image">
												<div v-for="sfile in serviceFile" :id="'s-'+sfile.id">
													<div v-if="sfile.fileType === 1" class="swiper-slide" :data-src="getCosFile(sfile.fileName)">
														<img :src="getCosFile(sfile.fileName)" />
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="problem_video">
										<div v-for="sfile in serviceFile">
											<div class="video" v-if="sfile.fileType === 2">
												<video :id="'f'+sfile.fileId" width="150" height="120"></video>
											</div>
										</div>
									</div>
								</div>
								<div class="cell cell2">
									<div class="cells" v-if="order.sparepartFee">
										<div class="cell-left">零配件费(元):</div>
										<div class="cell-right">{{order.sparepartFee}}&yen;</div>
									</div>
									<div class="cells" v-if="order.doorToDoorFee">
										<div class="cell-left">上门服务费(元):</div>
										<div class="cell-right">{{order.doorToDoorFee}}&yen;</div>
									</div>
									<div class="cells" v-if="order.repairFee">
										<div class="cell-left">维修费(元):</div>
										<div class="cell-right">{{order.repairFee}}&yen;</div>
									</div>
									<div class="cells total_cost" v-if="order.totalFee">
										<div class="cell-left">总费用(元)</div>
										<div class="cell-right">{{order.totalFee}}&yen;</div>
									</div>
								</div>
							</div>
						</li>
						<!-- 步骤四，反馈完成，已签名 -->
						<li v-if="order.repairState >= 104">
							<time class="cbp_tmtime" datetime="order.serverFinishTime">
								<span>{{order.serverFinishTime}}</span>
								<span>服务完成</span>
							</time>
							<div class="cbp_tmicon bg-green">
								<i class="am-icon-truck"></i>
							</div>
							<div class="cbp_tmlabel">
								<div class="cell-left">客户签名:</div>
								<div class="cell-right problem_img">
									<div id="sign-image">
										<div :href="getCosFile(order.sign)">
											<img :src="getCosFile(order.sign)" />
										</div>
									</div>
								</div>
							</div>
						</li>
						<!-- 步骤四，服务完成，已评价 -->
						<li v-if="order.repairState >= 104 && order.isEvaluation == 1">
							<div class="cbp_tmlabel">
								<div class="cells">
									<div class="cell-left">响应速度:</div>
									<div class="cell-right">
										<el-rate class="weui-form-preview__value" v-model="order.evaluateResponseSpeed" disabled disabled-void-color="#C6D1DE"></el-rate>
									</div>
								</div>
								<div class="cells">
									<div class="cell-left">服务态度:</div>
									<div class="cell-right">
										<el-rate class="weui-form-preview__value" v-model="order.evaluateServiceAttitude" disabled disabled-void-color="#C6D1DE"></el-rate>
									</div>
								</div>
								<div class="cells">
									<div class="cell-left">维修水平:</div>
									<div class="cell-right">
										<el-rate class="weui-form-preview__value" v-model="order.evaluateMaintenanceLevel" disabled disabled-void-color="#C6D1DE"></el-rate>
									</div>
								</div>
								<div class="cells">
									<div class="cell-left">其他评价:</div>
									<div class="cell-right">{{order.evaluateOther}}</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 分配人员弹出框 -->
		<div class="am-popup" id="create_user">
			<div class="am-popup-inner">
				<div class="am-popup-hd">
					<h4 class="am-popup-title">分配维修人员</h4>
					<span data-am-modal-close class="am-close">&times;</span>
				</div>
				<div class="am-popup-bd size">
					<div class="repair_man">
						<img src="../assets/img/repairman.png" alt="">
					</div>
					<select data-am-selected="{maxHeight: 170}" id="selectMan">
						<optgroup label="福建">
							<option value="man1">张三</option>
						</optgroup>
						<optgroup label="上海">
							<option value="man5">阿标</option>
						</optgroup>
					</select>
				</div>
				<div class="am-modal-footer">
					<button type="button" class="am-btn am-btn-default purple am-modal-btn" @click="distribution()">确定</button>
				</div>
			</div>
		</div>
		<!-- 视频播放弹出层 -->
		<div class="video_show" id="video_show">
			<video id='play' class='big_video' src='' controls></video>
			<div class="close_video">
				<a href="javascript:;" class="am-close am-close-alt am-icon-times" @click="closeVideo()"></a>
			</div>
		</div>
			<!-- If we need pagination -->
			<div class="swiper-pagination"></div>
	</div>
	
	<script src="../assets/js/jquery.min.js"></script>
	<script src="../assets/js/vue.js"></script>
	<script src="../assets/swiper/swiper-3.4.0.jquery.min.js"></script>
	<script src="../assets/js/lightgallery.js"></script>
	<script src="../assets/js/amazeui.min.js"></script>
	<!-- <script src="../assets/js/amazeui.datatables.min.js"></script> -->
	<!-- <script src="../assets/js/dataTables.responsive.min.js"></script> -->
	<script src="../assets/js/app.js"></script>
	<script src="../assets/tencent/tcplayer.min.js"></script>
	<script src="../assets/tencent/hls.min.0.8.8.js"></script>
	<script src="../assets/starts/start.js"></script>

	<script src="../js/common/Server.js"></script>
	<script src="../js/common/constant.js"></script>
	<script src="../js/common/common.js"></script>
	<script src="../js/order_details.js?v=23"></script>

</body>

</html>